<style>
	img.recthumb {
		padding: 0px;
	}
	img.recthumb:hover{
		opacity:0.8;

	}
	
  tr.result {
        min-height:110px;
        width:100%;
        border-width:1px;
        border-top-style:dotted;
        clear:both;
        float:left;
        margin-top:5px;
  }
  div.result h1 {
        font-size:16px;
  }

  #bookingButton{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:none;
    width:150px;
    height:35px;
    color:#fff;
    font-size:20px;
    border:#FFF 3px solid;
    background-color:#0896ff;
    text-shadow: 0.05em 0.05em 0.05em #333;
    float:right;
  }

  #bookingButton a{
    color:#fff;
  }

  #bookingButton a:hover{
    text-decoration:none;
  }

  #distance{
    color:#cccccc;
  }

  #address{
    color:#ff9900;
  }

  #link{
    color:#3366ff;
    font-weight:bolder;
  }

  #hotelname{
    color:#6AA118;
    font-size:16px;
    font-weight:bolder;
    
  }
	.pn-module-POBPortal table ul { margin:0px;}
	.pn-module-POBPortal table ul li{ 
		overflow: hidden;
		display: block;
		float: left;
		width: 100px;
		height: 67px;
		list-style: none;
		padding: 0px;
		margin: 9px;
		border: solid 4px white;
		-moz-box-shadow: 0 0 2px 2px #ccc;
		-webkit-box-shadow: 0 0 2px 2px #ccc;
		box-shadow: 0 0 2px 2px #ccc;
		text-align: center;
		line-height: 100% ;
		}
	#PopUp{display: none; position: absolute; left: 50%; top:100px; border: solid black 1px; padding:5px; width:490px; height:400px;}

</style>
<link href="modules/POBPortal/pnjavascript/defunkt-facebox/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="modules/POBPortal/pnjavascript/defunkt-facebox/lib/jquery.js" type="text/javascript"></script>
<script src="modules/POBPortal/pnjavascript/defunkt-facebox/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('a[rel*=facebox]').facebox({
			loadingImage : 'modules/POBPortal/pnjavascript/defunkt-facebox/src/loading.gif',
			closeImage   : 'modules/POBPortal/pnjavascript/defunkt-facebox/src/closelabel.png'
		})
	})
</script>

<!--[group_availabilities_array avail=$view.Availabilities]-->

<script type="text/javascript">
  function validateNumberOfRoom(){

    var rows = <!--[$groupAvailabilities|@count]-->;
    
    var number = 0;
    var validate = false;
    for (i=0;i<rows;i++){
      number = document.getElementById("number_"+i).value;
      //alert(number+"<br>");
      if(number > 0){
        validate = true;
      }
    }

    if(!validate) {
      alert("<!--[pnml name='_POBPORTAL_ERROR_SELECT_ROOM']-->");
      return false;
    }
  }
</script>
<script type="text/javascript" src="modules/POBPortal/pnjavascript/wz_tooltip.js"></script> 
<form method="post" action="https://phuketcity.com/index.php?module=POBBooking">
<input type="hidden" name="transaction[url]" value="<!--[$view.URL]-->">
<input type="hidden" name="transaction[hotelname]" value="<!--[$view.HotelName]-->">
<input type="hidden" name="transaction[hotelcode]" value="<!--[$view.HotelCode]-->">
<input type="hidden" name="transaction[description]" value="<!--[$view.Description]-->">
<input type="hidden" name="transaction[contactinfo]" value="<!--[$view.AddressLine]-->, <!--[$view.StateProv]-->, <!--[$view.CountryName]-->, <!--[$view.PostalCode]-->">
<input type="hidden" name="transaction[hotelname]" value="<!--[$view.HotelName]-->">
<input type="hidden" name="transaction[image]" value="<!--[$view.ImageItems[0].Images]-->">
<input type="hidden" name="transaction[thumb]" value="<!--[$view.ImageItems[0].Thumbs]-->">

<input type="hidden" name="transaction[policyname]" value="<!--[$view.PolicyName]-->">
<input type="hidden" name="transaction[policytext]" value="<!--[$view.PolicyText]-->">


<link rel="stylesheet" type="text/css" href="modules/POBPortal/pnjavascript/lightbox/stylesheets/example.css"/>
<!-- script type="text/javascript" src="modules/POBPortal/pnjavascript/lightbox/javascripts/top_up-min.js"></script -->
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>  
  <table width="100%">
      <tr onmouseover="this.bgColor='#ecf5ff'" onmouseout="this.bgColor='#ffffff'">
        <td valign="top">
            <span id="hotelname"><a href="http://<!--[$view.URL]-->"><!--[$view.HotelName]--></a></span> 
            <img src="modules/POBPortal/pnimages/stars<!--[$view.Rating]-->.gif" width="66px" height="12px" align="absmiddle" alt="ประกาศ" title="rating"/>
            <em id="address"><!--[$view.AddressLine]-->, <!--[$view.StateProv]-->, <!--[$view.CountryName]-->, <!--[$view.PostalCode]--></em>
            &nbsp;
          	<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;"><em>Map</em></span></a>
            <br>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <!--[if isset($view.ImageItems)]-->
            <ul>
            <!--[foreach from=$view.ImageItems item=image]-->
              <span 
                  onmouseover="Tip('&lt;img src=\'<!--[$image.Images]-->\' width=\'450\'/&gt;')" 
                  onmouseout="UnTip()"
              >
                  <li><img src="<!--[$image.Thumbs]-->" class="recthumb"></li>
              </span>&nbsp;
            <!--[/foreach]-->
            </ul>            
          <!--[/if]--><br>
        </td>
      </tr>
      <tr>
        <td>
          &nbsp;    
        </td>
      </tr>
      <tr class="result">
        <td>
            <p class="description2"><!--[$view.Description]-->&nbsp;&nbsp;</p>
        </td>
      </tr><br><br>
      <br>
      <!--       [$view.Availabilities|@print_r]        -->
      <!--[foreach from=$view.Availabilities item=tempAvailabilities name=foo]-->
          <input type="hidden" name="transaction[availabilities][<!--[$smarty.foreach.foo.index]-->][invcode]" value="<!--[$tempAvailabilities.InvCode]-->">
          <input type="hidden" name="transaction[availabilities][<!--[$smarty.foreach.foo.index]-->][date]" value="<!--[$tempAvailabilities.Date]-->">
          <input type="hidden" name="transaction[availabilities][<!--[$smarty.foreach.foo.index]-->][rate]" value="<!--[$tempAvailabilities.Rate]-->">
      <!--[/foreach]-->

      <!--[if $tempAvailabilities.Limit]-->
      <tr>
        <td>
            <table width="100%">
              <tr>
                <th width="40%" align="left"><!--[pnml name="_POBPORTAL_AVAILABLE_ROOM_TYPE"]--></th>
                <th width="15%" align="center"><!--[pnml name="_POBPORTAL_AVAILABLE_ROOM_AMOUNT"]--></th>
                <th width="15%" align="center"><!--[pnml name="_POBPORTAL_ROOM_AMOUNT"]--></th>
                <th width="30%" align="right"><!--[pnml name="_POBPORTAL_ROOM_RATE"]--></th>
              </tr>


              <!--[foreach from=$groupAvailabilities item=itemAvailabilities name=foo]-->

                <input type="hidden" 
                       name="transaction[roomstays][<!--[$smarty.foreach.foo.index]-->][invcode]" 
                       value="<!--[$itemAvailabilities.InvCode]-->"
                  >
                <input type="hidden" 
                       name="transaction[roomstays][<!--[$smarty.foreach.foo.index]-->][rate]" 
                       value="<!--[$itemAvailabilities.Rate]-->"
                >
                <input type="hidden" 
                       name="transaction[roomstays][<!--[$smarty.foreach.foo.index]-->][startdate]" 
                       value="<!--[$smarty.get.startDate]-->"
                >
                <input type="hidden" 
                       name="transaction[roomstays][<!--[$smarty.foreach.foo.index]-->][enddate]" 
                       value="<!--[$smarty.get.endDate]-->"
                >

                    <!--[if $itemAvailabilities.Limit > 0]-->
                      <tr>
                        <td align="left">
                          <a href="index.php?module=POBPortal&type=search&func=view&lat=<!--[$view.Latitude]-->&lon=<!--[$view.Longitude]-->&startDate=<!--[$view.startDate]-->&endDate=<!--[$view.endDate]-->&InvCode=<!--[$itemAvailabilities.InvCode]-->">
                            <!--[$itemAvailabilities.InvCode]-->
                          </a>
                        </td>
                        <td align="center"><!--[$itemAvailabilities.Limit]--></td>
                        <td align="center">
                          <select id="number_<!--[$smarty.foreach.foo.index]-->" 
                                  name="transaction[roomstays][<!--[$smarty.foreach.foo.index]-->][numberofunit]"
                          >
                            <!--[math equation="x+y" x=$itemAvailabilities.Limit y=1 assign="amountLimitRoom"]-->
                            <!--[section name=limit loop=$amountLimitRoom  start=0 step=1]-->
                              <option value="<!--[$smarty.section.limit.index]-->" ><!--[$smarty.section.limit.index]-->
                            <!--[/section]-->
                          </select>
                        </td>
                        <td align="right">THB <!--[$itemAvailabilities.Rate|number_format:2:".":","]--></td>
                      </tr>
                  <!--[/if]-->
              <!--[/foreach]-->
            </table>
        </td>
      </tr>
      <tr>
        <td>&nbsp;
        </td>
      </tr>
      <tr align="right">
        <td><button id="bookingButton" type="submit" onclick="return validateNumberOfRoom();"><!--[pnml name="_POBPORTAL_BOOKING_BUTTON"]--></button></td>
      </tr>
      <!--[else]-->
				<tr align="right">
					<td>
						<b><a href="http://<!--[$view.URL]-->" target="_blank">[Go to hotel site]</a></b>
					</td>
				</tr>
        
      <!--[/if]-->
  </table>
</form>







					
    
		<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    
    
    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map_canvas");
        
      if (useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 ) {
        mapdiv.style.width = "100%";
        mapdiv.style.height = "100%";
      } else {
        mapdiv.style.width = "100%";
        mapdiv.style.height = "400px";
      }
    }
      function initialize() {
      
        detectBrowser();
        //$selected, $notselected
        var myLatlng = new google.maps.LatLng('<!--[$smarty.get.lat]-->','<!--[$smarty.get.lon]-->');
        var myOptions = {
          scrollwheel: false,
          zoom: 15,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        }
    
        //"http://google-maps-icons.googlecode.com/files/bedandbreakfast1.png"
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        //alert("Confuse");
        //"http://www.google.com/mapfiles/marker.png"
        var poverty = [
                        
                          [
                            "<!--[$smarty.get.hotelname]-->", 
                            "<!--[$smarty.get.hotelname]-->", 
                            '<!--[$smarty.get.lat]-->',
                            '<!--[$smarty.get.lon]-->', 
                            1,
                            "modules/POBPortal/pnimages/hostel_0star.png"
                          ],
                   
                      ];
    
          setMarkers(map, poverty);
        }
    
    function makeMarker(imageName){
      //alert(imageName); 
      var iconImage = new google.maps.MarkerImage(imageName,
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 9,34.
          new google.maps.Point(9, 34));
        return iconImage;
    }
    
    function makeShadow(){
      var iconShadow = new google.maps.MarkerImage("http://www.google.com/mapfiles/shadow50.png",
          // The shadow image is larger in the horizontal dimension
          // while the position and offset are the same as for the main image.
          new google.maps.Size(37, 34),
          new google.maps.Point(0,0),
          new google.maps.Point(9, 34));
        return iconShadow;
    }
      
      function setMarkers(map, locations) {
    
        for (var i = 0; i < locations.length; i++) {
          var data = locations[i];
          var myLatLng = new google.maps.LatLng(data[2], data[3]);
         var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              //shadow: makeShadow(),
              icon: data[5],
              //shape: shape,
              title: data[0],
              zIndex: data[4]
          });
    
                       
        var contentString = data[1];
            
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        
        
        google.maps.event.addListener(marker, "click", infoCallback(infowindow, marker));
        
        }
        
        function infoCallback(infowindow, marker) {
          return function() {
          infowindow.open(map, marker);
      };
    }
      }
    
    
    </script>	
	<div id="info" style="display:none;">
		<h1><!--[$smarty.get.hotelname]--></h1>
		<code>
			<body onload="initialize()">
			<div id="map_canvas"></div>
		</code>
	</div>
		      <p> <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> </p>

    </body>
    </html>